<template>
    <div>
      <div style="display: flex; justify-content: flex-start">
        <el-input
          placeholder="档案号/姓名"
          v-model="page.searchObj.query"
          autofocus
          style="width: 230px; margin-right: 30px"
          clearable
          ><i slot="prefix" class="el-input__icon el-icon-search"></i
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="queryChildAll">搜索</el-button>
        <el-select v-model="page.searchObj.parentId" clearable placeholder="请选择父级菜单" @input="queryChildAll" style="margin-left: 50px">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.menu_name"
      :value="item.id">
    </el-option>
  </el-select>
      </div>
      <el-button
        type="primary"
        style="display: flex; justify-content: flex-start; margin: 10px 0"
        >新增用户</el-button
      >
      <el-table :data="tableData" style="width: 100%" height="65vh">
          <el-table-column
        type="selection"
        width="55">
      </el-table-column>
        <el-table-column prop="id" label="编号"> </el-table-column>
        <el-table-column prop="menu_name" label="菜单名称"> </el-table-column>
        <el-table-column prop="phone" label="描述"> </el-table-column>
        <el-table-column prop="parentMenu" label="父级菜单"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="value">
            <span>
              <el-switch
                style="display: block"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="启用"
                inactive-text="禁用"
                v-model="value.row.state"
                :active-value="0"
                inactive-value="1"
                @change="updateState(value.row)"
              >
              </el-switch>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="">
            <span>
              <el-button type="primary" icon="el-icon-edit" circle></el-button>
              <el-button type="danger" icon="el-icon-delete" circle></el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNum"
          :page-sizes="[5,10]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        page: {
          //分页查询条件
          pageNum: 1, //当前页
          pageSize: 5, //页面数量
          searchObj: {
            //条件对象
            query: "", //档案号/姓名
            parentId:'',//父级编号
          },
        },
        tableData: [],
        total:0 ,
        options: [],
      };
    },
    created(){
      this.queryChildAll();
      this.queryMenuParentAll();
    },
    methods: {
      handleSizeChange(val) {
        this.page.pageSize=val;
        this.queryChildAll();
      },
      handleCurrentChange(val) {
        this.page.pageNum=val;
        this.queryChildAll();
      },
      //   查询子级菜单
      queryChildAll(){
          this.axios.post("/api/hj/queryMenuChildAll",this.page)
          .then(result=>{
              this.total = result.data.total;
              this.tableData = result.data.list;
          })
      },
      //    查询父级菜单
      queryMenuParentAll(){
        this.axios.post("/api/hj/queryMenuParentAll")
        .then(result=>{
            this.options=result.data;
        })
      },
      // 修改状态
      state(id, state) {
        this.axios
          .get("/api/hj/updateMenuState", {
            params: {
              id: id,
              state: state,
            },
          })
          .then((result) => {
            this.searchQueryMember();
          });
      },
      updateState(obj) {
        // 0表示启用 1表示禁用
        if (obj.state > 0) {
          this.state(obj.id,1);
        } else {
          this.state(obj.id,0);
        }
      },
    },
  };
  </script>
  
  <style>
  </style>